<template>
  <!-- 登录页面蒙版 -->
  <div class="loginMask" @click.self="maskOn = false" v-if="maskOn">
    <!-- 登录表单 -->
    <div class="loginForm">
      <el-card>
        <el-row>
          <el-col :span="3">
            <span>{{ formTitle | titleFilter }}</span></el-col
          >
          <el-col :offset="20" :span="1">
            <i class="el-icon-close cursor" @click="maskOn = false"></i>
          </el-col>
        </el-row>
        <!-- 表单区域 -->
        <el-form ref="form" :model="form" class="marginLine" :rules="formRules">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="昵称"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              :type="passwordShow == 0 ? 'text' : 'password'"
              placeholder="密码"
            >
              <i
                :class="[
                  'iconfont',
                  passwordShow == 0 ? 'icon-kekan' : 'icon-bukekan',
                  'cursor',
                ]"
                slot="suffix"
                @click="passwordShow = passwordShow - 1"
              ></i>
            </el-input>
          </el-form-item>
          <!-- 登录注册切换 -->
          <el-row>
            <el-col class="text-center">
              <span class="cursor hover_orange" @click="changeFormType">{{
                  !formType ? "登录" : "快速注册"
                }}</span>
            </el-col>
          </el-row>
          <!-- 登录按钮 -->
          <el-row class="marginLine">
            <el-col class="text-center">
              <el-button
                @click="commitForm"
                class="loginButton"
                :type="formType ? 'primary' : 'success'"
              >{{ formTitle | titleFilter }}
              </el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import UserApi from "@/api/user";

export default {
  name: "Form",
  data() {
    return {
      maskOn: false,
      // 0 为注册 1为登录
      formType: 1,
      // 0为文本 1为密码
      passwordState: 1,
      form: {
        username: undefined,
        password: undefined,
      },
      formRules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
      },
    };
  },
  filters: {
    titleFilter(val) {
      return val?.length > 2 ? val.slice(-2) : val;
    },
  },
  computed: {
    passwordShow: {
      get() {
        return this.passwordState;
      },
      set() {
        this.passwordState = Math.abs(this.passwordState - 1);
      },
    },
    formTitle() {
      return this.formType ? "登录" : "快速注册";
    },
  },
  watch: {
    maskOn: {
      handler(newVal) {
        if (!newVal) {
          this.formType = 1;
          this.passwordState = 1;
          this.form = {
            username: undefined,
            password: undefined,
          };
        }
      },
    },
  },
  methods: {
    changeFormType() {
      let formType = this.formType;
      this.$refs.form.resetFields();
      this.formType = Math.abs(formType - 1);
    },
    async commitForm() {
      let res = {};
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        try {
          if (this.formType === 1) {
            res = await UserApi.login(this.form);
            this.$modal.msgSuccess(res.message);
            //登录成功通知头部组件更新
            this.$store.dispatch("loginSuccess", res.data);
            this.maskOn = false;
          } else {
            res = await UserApi.register(this.form);
            this.$modal.msgSuccess(res.message);
            this.$refs.form.resetFields();
            this.formType = 1;
          }
        } catch (error) {
          //登录/注册失败
          this.$refs.form.resetFields();
        }
      });
    },
  },
  mounted() {
    this.$bus.$on("maskShow", () => {
      this.maskOn = true;
    });
  },
};
</script>

<style lang="less" scoped>
.loginMask {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .loginForm {
    min-width: 350px;
    width: 25%;
  }

  ::v-deep .el-input__suffix {
    right: 10px;

    i {
      font-size: 20px;
    }
  }

  .loginButton {
    width: 70%;
  }

}

</style>
